<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>

    <!--解决乱码问题-->
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <!--2.引入 JQuery -->
    <script src="asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <!--3.引入线上 Bootstrap 的 js 文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <!--4.validate核心校验文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <!--    来源于JQUery的封装-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>

    <script type="text/javascript">
        /*
        *       AJAX异步刷新技术:
        *           1.创建 XMLHttpRequest 对象
        *           2.通过对象发送请求到 AJAX 引擎
        *           3.AJAX 引擎把请求发送到对应的服务器,前端不受影响
        *           4.服务器处理请求并响应回 AJAX 引擎
        *           5.AJAX 引擎根据响应状态进行数据处理（事件驱动）
        *
        * */
        onload = function () {
            var username = document.getElementById("username");
            var span = document.getElementsByTagName("span")[0];
            //失去焦点事件
            username.onblur =  function () {
                //1.创建对象XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                //2.发送请求到服务器
               // xhr.open("GET","HelloServlet?action='a'",true);
                //创建    "UserServlet?action='checkUsername'&username="
                //本来是在<from action ="checkUsername"中找到对应方法 &字段名，输入的值传输给    开启
                xhr.open("GET","UserServlet?action='checkUsername'&username="+username.value,true);
                //post需要
                xhr.send();
                //3.事件驱动
                xhr.onreadystatechange = function () {
                    //状态判断
                    if(this.readyState == 4 && this.status == 200){
                        //获取响应数据
                        var text = xhr.responseText;
                        //如果响应数据是json格式数据
                        //var json = JSON.parse(text);
                        span.innerText = text;
                    }
                }

            }
        }
    </script>
</head>
<body>
    <form action="">
        用户名:<input type="text" name="username" id="username"><span></span><br/>
        <input type="button" value="注册">
    </form>
</body>
</html>